<!--
 * @Author: sdorein sdorein@163.com
 * @Date: 2024-07-12 18:04:05
 * @LastEditors: sdorein sdorein@163.com
 * @LastEditTime: 2024-07-31 11:57:35
 * @FilePath: \vite-ts-project\src\views\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { io } from "socket.io-client";

const user = ref("10001");
user.value = generateUUID();
// const socket = io("http://localhost:3000",{
//   query:{
//     token:"112233"
//   }
// });
 // 假设你的WebSocket服务器运行在localhost:3000
const messages = ref<any[]>([]);
const newMessage = ref("");

onMounted(() => {
  // socket.on("message", (data: any) => {
  //   messages.value.push(data);
  // });
});

const sendMessage = () => {
  if (newMessage.value.trim() !== "") {
   // socket.emit("message", { text: newMessage.value, id: Date.now(), userid: user.value,user:'rein' });
    newMessage.value = "";
    newMessage.value = "";
  }
};
console.log(generateUUID());
function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}
</script>

<template>
  <Top />
  <div class="chat-room">
    <div class="messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <span>{{ message.text }}</span>
      </div>
    </div>
    <div class="message-input">
      <input
        type="text"
        v-model="newMessage"
        @keyup.enter="sendMessage"
        placeholder="Type a message..."
      />
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<style scoped>
html{
  scroll-behavior: smooth;
}
.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>
